<template>
    <div class="playList">
        <div class="songList-box">
            <div
                class="songList-item"
                v-for="item in playList.data"
                :key="item.id"
                :data-id="item.id"
                @click="playListJumpDetails(item.id)"
            >
                <div class="img-box">
                    <img :src="item.coverImgUrl" alt="" />
                    <div class="playCount">
                        <i class="el-icon-headset"></i>
                        <span>{{ huansuan(item.playCount) }}</span>
                    </div>
                </div>
                <div class="content-box">
                    <p>{{ item.name }}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
import { formatTime, debounce, lazyload, huansuan } from "../../utils/common";
const { mapState, mapMutations, mapActions } = createNamespacedHelpers(
    "searchDetails"
);
export default {
    created() {
        this.huansuan = huansuan;
        this.search(this.$route.params._keywords);
    },
    computed: {
        ...mapState(["playList", "searchType"]),
    },
    methods: {
        ...mapActions(["search"]),
        ...mapMutations([""]),
        playListJumpDetails(val) {
            this.$router.push("/home/playlist-details/" + val);
        },
    },
};
</script>

<style lang='scss' scoped>
p {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
img {
    width: 100%;
    height: 100%;
}
.songList-box {
    overflow: hidden;
    padding-top: 15px;
    .songList-item {
        width: 150px;
        height: 183px;
        float: left;
        margin: 0 50px 30px 0;

        .img-box {
            width: 150px;
            height: 150px;
            position: relative;
            cursor: pointer;
            img {
                position: relative;
                z-index: 8;
            }
            &::after,
            &::before {
                content: "";
                width: 87%;
                height: 87%;
                background-color: rgba(225, 225, 231, 0.9);
                position: absolute;
                top: 14px;
                right: -6px;
                z-index: 1;
                transition: all 0.4s;
                border-radius: 2px;
            }
            &::before {
                width: 77%;
                height: 77%;
                position: absolute;
                background-color: #d5d5d5;
                top: 22px;
                right: -10px;
            }
            &:hover {
                &::before {
                    position: absolute;
                    right: -18px;
                    background-color: rgba(218, 212, 212, 0.7);
                }
                &::after {
                    position: absolute;
                    right: -10px;
                    background-color: rgba(241, 171, 171, 0.7);
                }
            }
            .playCount {
                position: absolute;
                z-index: 13;
                width: 70px;
                height: 25px;
                line-height: 25px;
                background-color: rgba(2, 10, 18, 0.7);
                color: #ffffff;
                top: 0;
                right: 0;
                border-radius: 20px;
                font-size: 13px;
                text-align: center;
            }
        }
        .content-box {
            height: 33px;
            line-height: 33px;
            color: #4a4a4a;
            font-weight: 800;
            font-size: 15px;
        }
    }
}
</style>